<template>
  <transition name="drop">
    <div
      class="top-tip"
      v-show="showFlag"
      @click.stop="hide"
      >
      <slot></slot>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'top-tip',
  props: {
    delay: {
      type: Number,
      default: 2000
    }
  },
  data () {
    return {
      showFlag: false,
      timer: null
    }
  },
  methods: {
    show () {
      this.showFlag = true
      // 多次点击添加歌曲时，先清除定时器避免 bug
      clearTimeout(this.timer)
      // 2 秒后将 top-tip 组件隐藏
      this.timer = setTimeout(() => {
        this.hide()
      }, this.delay)
    },
    hide () {
      this.showFlag = false
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~common/stylus/variable.styl'
  .top-tip {
    position: fixed
    top: 0
    z-index: 9000
    width: 100%
    line-height: 44px
    text-align: center
    font-size: $font-size-medium
    background: $color-dialog-background
    &.drop-enter, &.drop-leave-to {
      opacity: 0
      transform: translate3d(0 , -100%, 0)
    }
    &.drop-enter-active, &.drop-leave-active {
      transition: all .3s
    }
  }
</style>
